<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style> 
div.bell
{
	width:100px;
	height:100px;
	transition:roate(100deg)
	-webkit-transition:roate(100deg)
	animation:myfirst 5s infinite;
	
	-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}



   
div:hover {
    width: 150px;
    height: 150px;

	}
@keyframes myfirst{
	10%,20%{
		-webkit-transform: rotate(-8deg);
	}
	5%,15%,25%{
		-webkit-transform: rotate(8deg);
	}
	0%,30%,100%{
		-webkit-transform: rotate(0deg);
	}
}
	


</style>
</head>
<body>
    <center>
        <h1>摇摆的铃铛</h1>
		<p>用keyframes做rotate效果。并加入div：houver。鼠标触图案，图案会变大。</p>
<div class="bell">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bell" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-bell fa-w-14 fa-9x"><path fill="yellow" d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z" class=""></path></svg>
	</div>
	<hr/>
	<p>图案来源：<a href="https://fontawesome.com/">Font Awesome</a></p>
    </center>


</body>
</html>